// 导入需要的组件和API
import { 
  Row,
  Col,
  Flex,
  Typography,
  Button,
  Form,
  Input,
  Divider,
  Radio,
  Select,
  TreeSelect,
  message,
  Modal 
} from 'antd'
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
// 1. 注释掉导入的deleteTag函数，但保留函数名作为注释
import { addTag, updateTagStatus /* deleteTag */ } from '../service/tag' // 暂时注释deleteTag函数
import { shopList } from '../service/shop'

export default function TagAdd() {
  const { id } = useParams() // 获取路由参数中的id
  const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
  const [form] = Form.useForm()
  const [parentTagOptions, setParentTagOptions] = useState([])
  const [mockData, setMockData] = useState([])
  const [currentTagData, setCurrentTagData] = useState(null) // 存储当前编辑的标签数据
  const [tagStatus, setTagStatus] = useState(0) // 添加标签状态状态管理

  // 标签状态选项
  const statusOptions = [
    { label: '启用', value: 0 },
    { label: '禁用', value: 1 }
  ]

  // 标签类型选项
  const tagTypeOptions = [
    { label: '用户标签', value: 0 },
    { label: '内容标签', value: 1 }
  ]

  // 门店状态选项
  const storeStatusOptions = [
    { label: '启用', value: 0 },
    { label: '禁用', value: 1 }
  ]

  // 处理标签状态更新
  const handleStatusChange = async (newStatus) => {
    const currentStatus = tagStatus; // 保存当前状态到闭包
    try {
      // 先显示加载状态，提供即时反馈
      message.loading('正在更新标签状态...', 0);
      
      console.log('更新标签状态:', { id, newStatus }); // 添加日志以便调试
      const res = await updateTagStatus(id, newStatus);
      
      // 关闭加载提示
      message.destroy();
      
      if (res && res.code === '0') {
        setTagStatus(newStatus);
        message.success('标签状态更新成功');
        // 更新当前标签数据
        if (currentTagData) {
          setCurrentTagData({ ...currentTagData, status: newStatus });
        }
      } else {
        message.error(res?.message || '标签状态更新失败');
        // 使用setTimeout确保在下次渲染周期中恢复状态
        setTimeout(() => setTagStatus(currentStatus), 0);
      }
    } catch (error) {
      console.error('更新标签状态错误:', error);
      message.destroy();
      message.error('操作失败，请重试');
      // 使用setTimeout确保在下次渲染周期中恢复状态
      setTimeout(() => setTagStatus(currentStatus), 0);
    }
  }

  // 处理表单提交
  const handleSubmit = async (values) => {
    try {
      // 构建请求数据
      const requestData = {
        tagType: values.tagType,
        tagName: values.tagName,
        tagParentId: values.tagParentId,
        coding: values.coding,
        tagDesc: values.tagDesc,
        storeStatus: values.storeStatus || 0
      }
      
      console.log('提交的标签数据:', requestData)
      
      // 调用添加标签API
      const res = await addTag(requestData)
      
      if (res.code === '0') {
        message.success('标签添加成功')
        form.resetFields()
      } else {
        message.error(res.message || '标签添加失败')
      }
    } catch (error) {
      console.error('添加标签错误:', error)
      message.error('操作失败，请重试')
    }
  }

  useEffect(() => {
    // // 获取所有店铺
    // ;(async () => {
    //   const res = await shopList({
    //     pageNo: 1,
    //     pageSize: 1000
    //   })
    //   console.log(res)
    //   const arr = res.data.objects.map((item) => {
    //     return {
    //       key: item.id,
    //       title: item.storeName,
    //       chosen: false
    //     }
    //   })
    //   setMockData(arr)
    // })()
    
    // 如果是编辑模式，加载标签详情
    if (isEditing) {
      // 模拟数据，实际应该从API获取
      const tagDetail = {
        id: id,
        status: 0, // 假设初始状态为启用
        // 其他标签详情字段
      }
      setCurrentTagData(tagDetail)
      setTagStatus(tagDetail.status) // 设置标签状态
    }
  }, [id, isEditing])

  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>{isEditing ? '编辑标签' : '新建标签'}</Typography.Title>
            {isEditing && (
              <>
                {/* 添加状态切换组件 */}
                <div style={{ marginRight: 16 }}>
                  <span style={{ marginRight: 8 }}>状态: </span>
                  <Select
                    value={tagStatus}
                    style={{ width: 120 }}
                    onChange={handleStatusChange}
                    options={statusOptions}
                  />
                </div>
                {/* 注释掉删除按钮 */}
                {/* <Button type="default" danger onClick={handleDelete}>
                  删除
                </Button> */}
              </>
            )}
          </Flex>
        </Col>
      </Row>
      <Form
        labelCol={{
          span: 4
        }}
        wrapperCol={{
          span: 12
        }}
        style={{ width: '100%', marginTop: 30 }}
        form={form}
        onFinish={handleSubmit}
        initialValues={{
          storeStatus: 0
        }}
      >
        <Row className="container" style={{ marginBottom: 0, marginTop: 0 }}>
          <Col span={24}>
            <Typography.Title level={4}>基本信息</Typography.Title>
          </Col>
          <Col span={24}>
            <Form.Item 
              label="标签类型" 
              name="tagType" 
              rules={[{ required: true, message: '请选择标签类型' }]}
            >
              <Select 
                placeholder="请选择标签类型" 
                style={{ width: 300 }}
                options={tagTypeOptions}
              />
            </Form.Item>
            
            <Form.Item 
              label="标签分组" 
              name="tagParentId"
            >
              <TreeSelect
                style={{ width: 300 }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={[
                  {
                    title: '内容标签',
                    value: '0',
                    children: [
                      { title: '美食', value: '1' },
                      { title: '旅游', value: '2' },
                      { title: '娱乐', value: '3' },
                      { title: '文化', value: '4' },
                      { title: '音乐', value: '5' }
                    ]
                  },
                  {
                    title: '用户标签',
                    value: '6',
                    children: [
                      { title: '富二代', value: '7' },
                      { title: '羊毛党', value: '8' },
                      { title: '铁公鸡', value: '9' },
                      { title: '购物狂', value: '10' }
                    ]
                  }
                ]}
                placeholder="请选择分组"
                treeDefaultExpandAll
              />
            </Form.Item>
            
            <Form.Item 
              label="标签名称" 
              name="tagName" 
              rules={[
                { required: true, message: '请输入标签名称' },
                { max: 50, message: '标签名称不能超过50个字符' }
              ]}
            >
              <Input placeholder="请输入标签名称" style={{ width: 300 }} />
            </Form.Item>
            
            <Form.Item 
              label="编码" 
              name="coding"
            >
              <Input 
                placeholder="支持字母，数字，下划线" 
                style={{ width: 300 }}
                pattern="^[a-zA-Z0-9_]*$"
                title="只能包含字母、数字和下划线"
              />
            </Form.Item>
            
            <Form.Item 
              label="描述" 
              name="tagDesc"
            >
              <Input.TextArea
                style={{ height: 120, width: 400, resize: 'none' }}
                placeholder="请输入标签描述"
              />
            </Form.Item>
            
            <Form.Item 
              label="门店状态" 
              name="storeStatus"
            >
              <Radio.Group>
                <Radio value={0}>启用</Radio>
                <Radio value={1}>禁用</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item label=" " colon={false}>
              <Button type="primary" htmlType="submit">
                {isEditing ? '更新' : '发布'}
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </>
  )
}